<script setup>
import '../assets/iconfont.css';

</script>
<template>
    <div class="aside-container">
        <el-menu
            :default-active="$route.path"
            class="el-menu-vertical"
            router
            :collapse-transition="false"
            background-color="#fff"
            text-color="#606266">

            <div v-for="item in userMenuList" :key="item.id">
                <div v-if="item.path">
                    <div v-if="!item.pid">
                        <el-menu-item :index="item.path">
                            <i :class="item.icon"></i>
                            <span>{{ item.name }}</span>
                        </el-menu-item>
                    </div>
                </div>
                <div v-else>
                    <el-submenu :index="item.id + ''">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span>{{ item.name }}</span>
                        </template>
                        <div v-for="subItem in item.children" :key="subItem.id">
                            <el-menu-item :index="subItem.path">
                                <i :class="subItem.icon"></i>
                                <span>{{ subItem.name }}</span>
                            </el-menu-item>
                        </div>
                    </el-submenu>
                </div>
            </div>
        </el-menu>
    </div>
</template>

<script>
import {setRoutes} from "@/router";
import Request from '../utils/request.js'
export default {
    name: 'Aside',
    components: {},
    // 用户信息
    userInfo: {},
    created() {
        let userMenuListStr = localStorage.getItem("userMenuList")
        this.userMenuList = userMenuListStr ? JSON.parse(userMenuListStr) : [];
        this.userInfo = localStorage.getItem("backUser") ? JSON.parse(localStorage.getItem("backUser")) : {};
        console.log("userMenuList:" + userMenuListStr);
    },
    data() {
        return {
          
            userMenuList: [
                {
                    name: 'Dashboard',
                    path: 'dashboard',
                    icon: 'el-icon-menu'
                },
                {
                    name: '数据统计',
                    path: '/merchant-dashboard',
                    icon: 'el-icon-data-analysis',
                    roles: ['MERCHANT']
                },
                {
                    name: 'Reports',
                    path: 'reports',
                    icon: 'el-icon-document',
                    children: [
                        {
                            name: 'Report 1',
                            path: 'report1',
                            icon: 'el-icon-document'
                        },
                        {
                            name: 'Report 2',
                            path: 'report2',
                            icon: 'el-icon-document'
                        }
                    ]
                },
                // 更多静态菜单项...
            ],
            user: {},
            path: this.$route.path
        }
    },
    methods: {
        printMenu(menu) {
            console.log("Submenu:" + menu)
        },
        refreshMenu(){
            Request.get("/menu/getMenuTree/"+this.userInfo.id).then(response => {
                if (response.code === '0') {
                    localStorage.setItem("userMenuList", JSON.stringify(response.data))
                    setRoutes();
         
                } else {
                    this.$message({
                        type: 'error',
                        message: response.msg
                    })
                }
            })
        }
    }
}
</script>

<style scoped>
.aside-container {
  height: 100%;
  background-color: #fff;
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.05);
}

.el-menu {
  border-right: none;
  padding: 16px 12px;
}

.el-menu-item {
  height: 50px;
  line-height: 50px;
  border-radius: 10px;
  margin-bottom: 6px;
  color: #606266;
  font-size: 14px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  padding: 0 15px;
}

.el-menu-item:hover {
  color: #FFA500;
  background-color: rgba(255, 245, 230, 0.8) !important;
}

/* 选中样式 - 新风格 */
.el-menu-item.is-active {
  color: #fff;
  background: #FFA500 !important;
  font-weight: 500;
  box-shadow: 0 4px 10px rgba(255, 165, 0, 0.25);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.el-menu-item.is-active::before {
  content: '';
  position: absolute;
  right: -15px;
  top: -15px;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  z-index: -1;
}

.el-menu-item.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent);
  z-index: -1;
}

.el-submenu .el-submenu__title {
  height: 50px;
  line-height: 50px;
  border-radius: 10px;
  color: #606266;
  font-size: 14px;
  transition: all 0.3s;
}

.el-submenu .el-submenu__title:hover {
  color: #FFA500;
  background-color: rgba(255, 245, 230, 0.8) !important;
}

.el-submenu .el-menu--inline {
  padding-left: 4px;
  margin-top: 4px;
}

.el-submenu .el-menu--inline .el-menu-item {
  height: 45px;
  line-height: 45px;
  padding-left: 48px !important;
  background-color: transparent;
  border-radius: 8px;
  margin-bottom: 4px;
}

.el-submenu .el-menu--inline .el-menu-item:hover {
  color: #FFA500;
  background-color: rgba(255, 245, 230, 0.8) !important;
}

.el-submenu .el-menu--inline .el-menu-item.is-active {
  color: #fff;
  background: #FFA500 !important;
  font-weight: 500;
  box-shadow: 0 4px 10px rgba(255, 165, 0, 0.25);
}

/* 图标样式 */
.el-menu-item [class^="el-icon-"],
.el-submenu [class^="el-icon-"] {
  font-size: 18px;
  margin-right: 12px;
  color: #909399;
  transition: all 0.3s;
}

.el-menu-item:hover [class^="el-icon-"],
.el-submenu:hover > .el-submenu__title [class^="el-icon-"] {
  color: #FFA500;
}

.el-menu-item.is-active [class^="el-icon-"],
.el-submenu.is-active > .el-submenu__title [class^="el-icon-"] {
  color: #fff;
}

/* 添加动画效果 */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(255, 165, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0); }
}

.el-menu-item.is-active {
  animation: pulse 2s infinite;
}
</style>
